import { useCallback } from "react";
import { View, Button, Image } from "@tarojs/components";
import { useEnv, useModal, useToast } from "taro-hooks";
import icon1 from './assets/1.png';
import icon2 from './assets/2.jpg';
import icon3 from './assets/3.jpg';
import icon4 from './assets/4.jpg';
import icon5 from './assets/5.jpg';
import icon6 from './assets/6.jpg';
import icon7 from './assets/7.jpg';
import icon8 from './assets/8.jpg';
import './index.less'

const Index = () => {
  const [show] = useModal({
    title: "Taro Hooks!",
    showCancel: false,
    confirmColor: "#8c2de9",
    confirmText: "支持一下",
    mask: true,
  });

  return (
    <View className='wrapper'>
      <View className='content'>
        <View className='turntable'>
          <View className='icons rotate'>
            <View className='item'><Image className='item-icon' src={icon1} /></View>
            <View className='item'><Image className='item-icon' src={icon2} /></View>
            <View className='item'><Image className='item-icon' src={icon3} /></View>
            <View className='item'><Image className='item-icon' src={icon4} /></View>
            <View className='item'><Image className='item-icon' src={icon5} /></View>
            <View className='item'><Image className='item-icon' src={icon6} /></View>
            <View className='item'><Image className='item-icon' src={icon7} /></View>
            <View className='item'><Image className='item-icon' src={icon8} /></View>
          </View>
          <View className='power'><Button className='button'>转</Button></View>
        </View>

      </View>


      <View className='ad'></View>

    </View>
  );
};

export default Index;
